
<template>
  <div class="videoInfoRoot">
    <div class="user">
      <img class="avatar" :src="`${paramsType==='mv' ? videoInfo.artists[0].img1v1Url: videoInfo.cover
   }?param=100y100`" alt="">
      <div class="userName">
        {{paramsType ==='mv' ? videoInfo.artists[0].name: videoInfo.creator.nickname}}
      </div>
    </div>
    <div class="title">
      {{paramsType =='mv' ? videoInfo.name: videoInfo.title}}
    </div>
    <div class="otherInfo">
      <div>发布:{{  videoInfo.publishTime}}</div>
      <div>播放:{{videoInfo.playTime}}</div>
    </div>
    <div class="btns">
      <div class="btnItem">
        <i class="iconfont icon-good"></i>已赞
      </div>
      <div class="btnItem">
        <i class="iconfont icon-xihuan"></i>收藏
      </div>
      <div class="btnItem">
        <i class="iconfont icon-zhuanfa"></i>分享
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'videoInfoIndex',
  props: {
    paramsId: {
      type: String,
      default: ''
    },
    paramsType: {
      type: String,
      default: ''
    },
    videoInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  setup() {
    return {}
  }
}
</script>

<style scoped>
.videoInfoRoot {
  font-size: 12px;
  margin-bottom: 30px;
}
.user {
  display: flex;
  margin: 10px 0;
  align-items: center;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.userName {
  margin-left: 10px;
}
.title {
  font-size: 20px;
  margin: 20px 0 10px;
  font-weight: 600;
}
.otherInfo {
  display: flex;
  color: #aaa;
}
.otherInfo > div {
  margin-right: 20px;
}
.btns {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.btnItem {
  padding: 5px 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
}
.btnItem i {
  margin-right: 3px;
}
</style>